let { resolve } = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",
    entry: {
        base: './src/base.js',
        login: './src/pages/login/index.js',
        userAdd: './src/pages/userAdd/index.js',
        users: './src/pages/users/index.js',
        userUpdate: './src/pages/userUpdate/index.js',
    },
    output: {
        path: resolve(__dirname, 'dist'), // 所有打包文件所在的根目录
        filename: 'js/[name].[contenthash:8].js', // 打包生成的js文件 (可以带目录)
        clean: true, // 打包时, 先自动清除打包文件夹
    },
    plugins: [ // 创建打包页面的多个plugin
        new HtmlWebpackPlugin({
            template: "./src/pages/index/index.html",// 指定模板文件。
            filename: 'index.html',// 生成的打包页面文件名
            chunks: [],// 引入的js包名
            inject: "body",// 将打包生成的JS文件放置在body尾部
        }),
        new HtmlWebpackPlugin({
            template: "./src/pages/login/index.html",
            filename: 'login.html',
            chunks: ['base', 'login'],
            inject: "body",
        }),
        new HtmlWebpackPlugin({
            template: "./src/pages/userAdd/index.html",
            filename: 'userAdd.html',
            chunks: ['base', 'userAdd'],
            inject: "body",
        }),
        new HtmlWebpackPlugin({
            template: "./src/pages/users/index.html",
            filename: 'users.html',
            chunks: ['base', 'users'],
            inject: "body",
        }),
        new HtmlWebpackPlugin({
            template: "./src/pages/userUpdate/index.html",
            filename: 'userUpdate.html',
            chunks: ['base', 'userUpdate'],
            inject: "body",
        })
    ],
    devServer: {
        proxy:{
            "/api":{
                target:"http://localhost:8082",
                pathRewrite:{
                    "^/api" : ""
                }
            }
        },
        port: 3000, // 端口号
        open: true, // 自动打开浏览器
    },
    // 配置 loader
    module: {
        rules: [
            // 处理JS文件 ES6 => ES5
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不进行处理的文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                    corejs: { version: 2 } // 指定core-js的版本号为2
                                }
                            ]
                        ]
                    }
                }
            },

            // 处理css文件
            {
                test: /\.css$/,  // 配置css文件的正则
                use: [
                    'style-loader', // js文件 => 页面的style标签
                    'css-loader'  // css文件 => js文件
                ]
            },

            // 处理art文件
            {
                test: /\.art$/,
                loader: "art-template-loader",
            },
        ]
    },
    //增加sourceMap
    devtool: 'cheap-module-source-map'
}